<template>
  <div class="filter-dropdown" style="padding: 8px">
    <a-input-search
      ref="searchInput"
      v-model:value="searchInputValue[props.column.dataIndex]"
      :placeholder="`${props.column.title}`"
      style="width: 150px; margin-bottom: 8px; display: block"
      enter-button
      size="small"
      @search="
        filterSearch(
          searchInputValue[props.column.dataIndex],
          props.column.dataIndex,
          props.column
        )
      "
    />
    <!-- :options="searchFilterList(column.filters, searchInputValue)" -->
    <a-checkbox-group
      :value="props.selectedKeys"
      :options="props.column.filters"
      @change="
        (checkedValue) =>
          props.setSelectedKeys(checkedValue ? checkedValue : [])
      "
    >
      <template #label="scope">
        <span>{{ scope.text }}</span>
      </template>
    </a-checkbox-group>
    <div style="display: flex; justify-content: space-between; margin-top: 6px">
      <a-button
        size="small"
        type="link"
        :disabled="props.selectedKeys.length < 1"
        style="width: 60px"
        @click="handleReset(props.clearFilters, props.column)"
      >
      {{ $t('common.reset') }}
      </a-button>
      <a-button
        type="primary"
        size="small"
        style="width: 60px"
        @click="
          handleSearch(
            props.selectedKeys,
            props.confirm,
            props.column.dataIndex
          )
        "
      >
      {{ $t('common.ok') }}
      </a-button>
    </div>
  </div>
</template>
  
<script setup>
import { ref, reactive } from "vue";
import { cloneDeep } from "lodash";
let props = defineProps({
  setSelectedKeys: {
    type: [Function, null],
    default: () => null,
  }, // 改变选中的数据
  selectedKeys: {
    type: Array,
    default: () => [],
  }, // 被选中的数据
  confirm: {
    type: [Function, null],
    default: () => null,
  }, // 提交
  clearFilters: {
    type: [Function, null],
    default: () => null,
  }, // 重置
  column: {
    type: Object || null,
    default: () => null,
  }, // 当前列信息
  initialList: {
    type: Array,
    default: () => [],
  }, // 表格列配置信息
});

let initialListCopy = cloneDeep(props.initialList);
// 筛选搜索
const searchInputValue = reactive({});
const searchInput = ref(null);
// 筛选
const filterSearch = (searchInputValue, dataIndex, column) => {
  const filterColumn = initialListCopy.filter((ftm) => {
    return ftm.dataIndex == dataIndex;
  });
  column.filters = filterColumn[0].filters.filter((itm) => {
    return (
      String(itm.value)
        .toLowerCase()
        .indexOf(String(searchInputValue)?.toLowerCase()) >= 0
    );
  });
};
// 搜索
const handleSearch = (selectedKeys, confirm, dataIndex) => {
  searchInputValue[dataIndex] = null;
  confirm();
};
// 重置
const handleReset = (clearFilters, column) => {
  searchInputValue[column.dataIndex] = null;
  const filterColumn = initialListCopy.filter((ftm) => {
    return ftm.dataIndex == column.dataIndex;
  });
  column.filters = filterColumn[0].filters;
  clearFilters({
    confirm: true,
  });
};
</script>